<template lang="html">
  <div class="merchantsSJBox">
    <el-row class="formBox box1">
        <el-col :span="2" class="text-right headLable">
          <span>商家名：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input v-model="name" size="small" class="text" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="text-right">
          <span>商家编码：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input class="text" v-model="code" size="small" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="text-right">
          <span>所在省份：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-select size="small" v-model="city" clearable placeholder="请选择" class="text">
            <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-col>
    </el-row>
    <el-row class="formBox" style="margin:0 10px;" >
      <el-col :span="2" class="text-right headLable">
        <span>是否总公司：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-select size="small" v-model="type" clearable placeholder="请选择">
          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="formBox box2">
      <el-col :span="2" class="text-left" style="margin-left:80px;">
         <el-button type="success"  size="small" @click="getList">筛选</el-button>
      </el-col>
      <el-col :span="2" :offset="16" class="text-left">
         <el-button type="success"  size="small" @click="changeTanContent(1)"  >＃新增商家</el-button>
      </el-col>
    </el-row>

    <el-row class="box3" v-loading.body="$store.state.TanMerchants.loading">
      <ul class="listBox4">
          <li class="first">
            <span class="order gray">
               商家编码
            </span>
            <span class="name gray">商家名</span>
            <span class="city gray">所在城市</span>
            <span class="numb gray">商家类型</span>
            <span class="review gray">商家点评代码</span>
            <span class="location gray">登陆账号</span>
            <span class="operation green">操作</span>
          </li>
          <li v-for="(item,index) in $store.state.TanMerchants.SJList">
            <span class="order" @click="changeTanContent(3,item.id)">{{item.code}}</span>
            <span class="name text-left">
              <p>{{item.name}}</p>
            </span>
            <span class="city text-left">{{item.cityName}}</span>
            <span class="numb text-left">{{item.typeNames==''?'-':item.typeNames}}</span>
            <span class="review text-left copyText1" :data-clipboard-text="$store.state.copyUrl+'/allEvaluation.html?id='+item.id"
            @click="copy(index)">
              复制
            </span>
            <span class="location">重置</span>
            <span class="operation green" @click="changeTanContent(4,item.id)">编辑</span>
          </li>
      </ul>
    </el-row>
    <el-row style="padding-bottom:20px; text-align:right;">
      共{{this.$store.state.TanMerchants.total}}条
      <span style="display:inline-block; min-width:100px;">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :page-count="$store.state.TanMerchants.pages">
        </el-pagination>
      </span>
    </el-row>
  </div>
</template>

<script>
import "../clipboard.min.js" //复制插件
import axios from 'axios'
var url;

export default {
  data() {
    return {
      list: [],
      fileList2: [],
      name: '',
      code: '',
      city: '',
      type: '',
      checked: true,
      dialogFormVisible: false,
      cityList: [{
        name: '四川省',
        code: 510000
      }, {
        name: '浙江省',
        code: 330000
      }, {
        name: '上海市',
        code: 310000
      },{
        name: '重庆市',
        code: 500000
      }],
      typeList: [{'label':'是','value':1}, {'label':'否','value':0}],
      page: 1
    }
  },
  methods: {
    copy: function(n) {
      var that = this;
      var a = document.getElementsByClassName('copyText1')
      var clipboard = new Clipboard(a[n]); //实例化
      console.log("!1");
      clipboard.on('success', function(e) {
        console.log('11');
        that.$message({
          message: '复制成功',
          type: 'success',
          duration: 800
        });
      });
    },
    changeTanContent: function(type, id) {
      if (type == 1) {
        var title = "新增商家";
      } else if (type == 4) {
        var title = "商家编辑";
      } else if (type == 3) {
        var title = "商家详情"
      }
      var json1 = {
        'type': type,
        'name': 'TanMerchants',
        'id': id,
        'title': title
      }
      this.$store.dispatch('changeDialog', json1);
    },
    handleCurrentChange: function() {
      this.getList();
    },
    getList: function() {
      var that = this;
      this.$store.dispatch('showLoading', 'TanMerchants');
      var json = {
        provinceCode: that.city,
        code: that.code,
        name: that.name,
        pageCount: 10,
        pageIndex: that.page,
        isParent: that.type
      };
      this.$store.dispatch('getMerchantsSJ', json);
    }
  },
  created() {
    url = this.$store.state.url;
    this.getList();
  }
}
</script>

<style lang="Sass" scoped>
.merchantsSJBox{
  .formBox{ background: #fff; padding: 10px; text-align: left;

    .text{ height: 30px;
      .el-input__inner{height: 30px; width: 100%;}
    }
    .date{width: 150px; height: 30px;
      .el-input__inner{height: 30px; width: 100%;}
    }
    .select{width: 120px;
      .el-input__inner{width: 100%;}
    }
  }
  span{font-size: 12px; line-height: 30px;}
  .box1{border-radius: 10px 10px 0 0; padding: 20px 10px 0 10px; margin: 20px 10px 0 10px;}
  .box2{border-radius: 0 0 10px 10px; padding: 10px 10px 10px 10px; margin: 0px 10px ;}
  .box3{margin: 20px 10px; background: #fff; padding: 10px; box-sizing: border-box; border-radius: 10px;
    .cell{text-align: left;}
  }
  .btn{height: 32px; padding: 0 10px;
    span{line-height: 0px;  }
  }
  .tanBox{
    .el-dialog--small{min-width: 650px;}
    .el-dialog__header{text-align: left;}
  }
  .el-tag{line-height: 24px; margin-left: 10px;}
}
.listBox4{width: 100%; background: #fff;

  .first{display: flex; height: 30px; line-height: 30px; text-align: left; padding: 0 5px; background: #fff !important;

      span{display: inline-block; font-size: 12px;}
      .order{flex: 0 0 200px; height: auto;}
      .name{flex: 1;}
      .city{flex: 0 0 120px;}
      .numb{flex: 0 0 250px;}
      .allNumb{flex: 0 0 80px;}
      .review{flex: 0 0 110px;}
      .location{flex: 0 0 120px;}
      .downTime{flex: 0 0 90px; line-height: 30px; margin-top: 0px;}
      .updateTime{flex: 0 0 120px; line-height: 30px; margin-top: 0px;}
      .operation{flex: 0 0 80px;}
  }
  li{display: flex; height: auto; line-height: 30px;  text-align: left; padding: 10px 5px; box-sizing: border-box;

    span{display: inline-block; box-sizing: border-box; line-height: 14px;}
    .order{flex: 0 0 200px; height: auto; cursor: pointer;}
    .name{flex: 1;
      p{margin: 0; margin: 0; line-height: 14px; font-size: 12px; width: 90%;}
      }
    .city{flex: 0 0 120px;}
    .numb{flex: 0 0 250px;}
    .allNumb{flex: 0 0 80px;}
    .review{flex: 0 0 110px; cursor: pointer;}
    .location{flex: 0 0 120px;}
    .downTime{flex: 0 0 90px; line-height: 30px; margin-top: 0px;}
    .updateTime{flex: 0 0 120px; line-height: 30px; margin-top: 0px;}
    .operation{flex: 0 0 80px; cursor: pointer;}
  }
  li:nth-of-type(odd){background: #FAFAFC;}

}
</style>
